<template>
  <div class="contBody">
    <h2 class="title">OpenLayers 地图</h2>
    <div id="map" class="map__x"></div>
  </div>
</template>

<script>
import { Map, View } from "ol"; // 地图实例方法、视图方法
import Tile from "ol/layer/Tile"; // 瓦片渲染方法
import Vector from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import XYZ from "ol/source/XYZ"; // OSM瓦片【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题！！！！】
import "ol/ol.css"; // 地图样式

import yunnan from "@/assets/json/00000000.json";

export default {
  name: "MapPage",
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 地图实例
      this.map = new Map({
        target: "map", // 对应页面里 id 为 map 的元素
        layers: [
          // 图层
          new Tile({
            source: new XYZ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7", // 新高德地图
            }),
            zIndex: 1,
            visible: true,
          }),

          new Vector({
            source: new VectorSource({
              features: new GeoJSON().readFeatures(yunnan),
            }),
            zIndex: 2,
            style: () => {
              return new Style({
                stroke: new Stroke({
                  color: "#00ffff",
                  width: 2,
                }),
              });
            },
          }),
        ],
        view: new View({
          // 地图视图
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [100.864943, 24.041115], // 云南坐标
          minZoom: 5, // 地图缩放最小级别
          zoom: 6, // 地图缩放级别（打开页面时默认级别）
        }),
      });
    },
  },
};
</script>

<style lang="css" scoped>
.contBody .title {
  padding: 0 0 24px;
}
.map__x {
  width: 100%;
  height: 600px;
  border: 1px solid #eee;

  background: rgba(0,0,0,1);
}
</style>
